<template>
  <div class="news_container">
    <div class="image">
      <el-image
        style="height:100%;width:inherit"
        :src="news_container_img"
        fit="cover"
      ></el-image>
      <div class="front_title">
        <p>品牌新闻</p>
        <p>
          三两已经在烟台开了数十家门店，为烟台人民提供了便利、干净、美味的酱香包
        </p>
      </div>
    </div>

    <div class="news_list">
      <div
        v-for="(item, index) in news_options"
        :key="index"
        class="news_list_item"
      >
        <div class="img">
          <img :src="item.journalism_image" />
        </div>
        <div class="news_preview">
          <p v-html="item.journalism_title"></p>
          <p v-html="item.journalism_content"></p>
          <div class="news_list_item_footer">
            <div class="footer_img">
              <i class="iconfont icon-shizhong"></i>
            </div>
            <span>{{ item.journalism_time | formatDate }}</span>
            <span @click="to_detail(item)">查看更多</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页按钮 -->
    <div class="pagination">
      <el-pagination
        background
        layout="pager, next"
        :page-size="5"
        :total="95"
        class=""
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchNews } from "../api/api.js";
export default {
  data() {
    return {
      news_options: [
        {
          url: require("../assets/news/image/组5.jpg"),
          title: "吃了那么多年，你对酱和卤了解多少呢？",
          content:
            "酱和卤是熟食店经常使用的熟食加工方法。说到酱和卤，很多人会认为这两者几乎是相同的，所以才有了“酱卤”的叫法。",
          date: "2019-10-11",
          icon: require("../assets/news/icon/组10.jpg")
        },
        {
          url: require("../assets/news/image/组6.jpg"),
          title: "吃了那么多年，你对酱和卤了解多少呢？",
          content:
            "酱和卤是熟食店经常使用的熟食加工方法。说到酱和卤，很多人会认为这两者几乎是相同的，所以才有了“酱卤”的叫法。",
          date: "2019-10-11",
          icon: require("../assets/news/icon/组10.jpg")
        },
        {
          url: require("../assets/news/image/组7.jpg"),
          title: "吃了那么多年，你对酱和卤了解多少呢？",
          content:
            "酱和卤是熟食店经常使用的熟食加工方法。说到酱和卤，很多人会认为这两者几乎是相同的，所以才有了“酱卤”的叫法。",
          date: "2019-10-11",
          icon: require("../assets/news/icon/组10.jpg")
        },
        {
          url: require("../assets/news/image/组8.jpg"),
          title: "吃了那么多年，你对酱和卤了解多少呢？",
          content:
            "酱和卤是熟食店经常使用的熟食加工方法。说到酱和卤，很多人会认为这两者几乎是相同的，所以才有了“酱卤”的叫法。",
          date: "2019-10-11",
          icon: require("../assets/news/icon/组10.jpg")
        },
        {
          url: require("../assets/news/image/组9.jpg"),
          title: "吃了那么多年，你对酱和卤了解多少呢？",
          content:
            "酱和卤是熟食店经常使用的熟食加工方法。说到酱和卤，很多人会认为这两者几乎是相同的，所以才有了“酱卤”的叫法。",
          date: "2019-10-11",
          icon: require("../assets/news/icon/组10.jpg")
        }
      ],
      icon: require("../assets/news/icon/组10.jpg"),
      news_container_img: require("../assets/news/image/banner-无字.jpg"),
      params: {
        type: ""
      }
    };
  },
  // filters: {
  //   formatDate: function(value) {
  //     return this.moment(value).format('YYYY-MM-DD')
  //   }
  // },
  created() {
    this._fetchNews();
  },
  mounted() {
    this.initScroll();
  },
  methods: {
    // 拉取新闻数据
    _fetchNews() {
      fetchNews(this.params).then(res => {
        this.news_options = res.data.results;
      });
    },
    // mounted初始化scroll
    initScroll() {
      document.documentElement.scrollTop = 0;
    },
    to_detail(params) {
      this.$router.push({
        name: "newsdetail",
        params
      });
    }
  }
};
</script>

<style lang="less" scoped>
.news_container {
  .image {
    position: relative;
    width: 100%;
    height: 300px;
    background: transparent;
    margin-bottom: 65px;

    .front_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: front_title 2s;
      cursor: default;

      @keyframes front_title {
        from {
          opacity: 0;
          transform: translate(-50%, 50%);
        }
      }

      p {
        color: #ffffff;
        margin: 0;
        text-align: center;

        &:first-child {
          font-size: 48px;
          font-weight: bold;
          margin-bottom: 23px;
        }
        &:last-child {
          font-size: 16px;
          font-weight: 400;
        }
      }
    }
  }

  .news_list {
    width: 1200px;
    margin: 0 auto;

    .news_list_item {
      display: flex;
      margin-bottom: 34px;

      &:last-child {
        margin-bottom: 0;
      }

      .img {
        width: 600px;
        height: 256px;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .news_preview {
        width: 572px;
        box-sizing: border-box;
        padding: 23px 0 0 72px;
        cursor: default;

        p {
          margin: 0;

          &:first-child {
            width: fit-content;
            position: relative;
            font-size: 26px;
            font-weight: 400;
            cursor: pointer;

            &:hover {
              color: #e53832;
              //   animation: ani 0.7s infinite;

              //   @keyframes ani {
              //     to {
              //       letter-spacing: 1px;
              //     }
              //   }
              &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 3px;
                background: #e53832;
                bottom: 0;
                left: 0;
              }
            }
          }

          &:nth-child(2) {
            font-size: 16px;
            font-weight: 400;
            margin-top: 28px;
            margin-bottom: 80px;
            line-height: 32px;
            opacity: 0.8;
          }
        }

        .news_list_item_footer {
          position: relative;
          .footer_img {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 11px;
            // vertical-align: middle;
          }
          span {
            font-size: 16px;

            // &:nth-last-child(2) {
            //   margin-left: 26px;
            // }

            &:nth-child(3) {
              margin-left: 34px;
              cursor: pointer;
              position: relative;

              &:hover {
                color: #e53832;
                &::after {
                  position: absolute;
                  content: "→";
                  right: -30px;
                  color: #e53832;
                  transform: scale(1.7, 1.4);
                  animation: arrow 1s infinite;

                  @keyframes arrow {
                    0% {
                      transform: translateX(0px) scale(1.7, 1.4);
                    }
                    33% {
                      transform: translateX(-5px) scale(1.7, 1.4);
                    }
                    66% {
                      transform: translateX(0px) scale(1.7, 1.4);
                    }
                    100% {
                      transform: translateX(0px) scale(1.7, 1.4);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .pagination {
    margin-top: 65px;

    .el-pagination {
      margin: 0 auto;
      width: fit-content;
    }
  }
}
</style>
